/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <sf-form ref="form"
             class="new-compare_form"
             :label-width="100">
        <sf-form-item>
            <sf-fieldlabel class="p-l0">
                <lang>灰度服务名称</lang>
            </sf-fieldlabel>
            <sf-textfield
                ref="fieldName"
                v-model="formData.readableName"
                :default-width="defaultWidth"
                :max-length="30"
                :allow-blank="false"
                :utf8-length="false"
                vtype="name"
                :blur-trim="true"
                :placeholder="_('请输入灰度服务名称')" />
        </sf-form-item>
        <sf-form-item class="flex-center">
            <sf-fieldlabel>
                <lang>服务协议</lang>
            </sf-fieldlabel>
            <sf-radio-group v-model="formData.protocol">
                <sf-radio name="protocol"
                          :check-value="1">
                    https
                </sf-radio>
                <sf-radio name="protocol"
                          :check-value="2">
                    gRPC
                </sf-radio>
            </sf-radio-group>
        </sf-form-item>
        <div class="form-box__list">
            <div class="form-box__items">
                <div class="form-box__title">
                    <img src="../../../../img/model__icon.svg"
                         class="m-r5"
                         alt="">
                    <lang>模型1</lang>
                </div>
                <div class="form-select__box">
                    <div class="form-select__item">
                        <sf-form-item class="form-flex">
                            <sf-fieldlabel>
                                <lang>选择模型</lang>
                            </sf-fieldlabel>
                        </sf-form-item>
                        <sf-select v-model="formData.default.modelId"
                                   :default-width="selectWidth"
                                   :options="modelList"
                                   :allow-blank="false"
                                   :placeholder="_('请选择模型')" />
                    </div>
                    <div class="form-select__item">
                        <sf-form-item class="form-flex">
                            <sf-fieldlabel>
                                <lang>服务名称</lang>
                            </sf-fieldlabel>
                        </sf-form-item>
                        <sf-textfield
                            ref="fieldName"
                            v-model="formData.default.subName"
                            :default-width="selectWidth"
                            :max-length="30"
                            :allow-blank="false"
                            :utf8-length="false"
                            vtype="name"
                            :blur-trim="true"
                            :placeholder="_('请输入服务名称')" />
                    </div>
                    <div class="form-select__item">
                        <sf-form-item class="form-flex">
                            <sf-fieldlabel>
                                <lang>流量权重（%）</lang>
                            </sf-fieldlabel>
                        </sf-form-item>
                        <sf-numberfield
                            v-model="formData.default.traffic"
                            :default-width="numberWidth"
                            :allow-blank="false"
                            :min-value="1"
                            :max-value="100"
                            :allow-decimals="false"
                            :placeholder="_('请输入整数数字')" />
                    </div>
                </div>
                <select-image-form
                    ref="defaultImage"
                    :image-list="imageList"
                    :submit-data="formData.default" />
                <instance-number-form
                    ref="defaultInstance"
                    :submit-data="formData.default" />
                <resource-config-form
                    ref="defaultResource"
                    :submit-data="formData.default" />
            </div>
            <div class="form-box__items">
                <div class="form-box__title">
                    <img src="../../../../img/model__icon.svg"
                         class="m-r5"
                         alt="">
                    <lang>模型2</lang>
                </div>
                <div class="form-select__box">
                    <div class="form-select__item">
                        <sf-form-item class="form-flex">
                            <sf-fieldlabel>
                                <lang>选择模型</lang>
                            </sf-fieldlabel>
                        </sf-form-item>
                        <sf-select v-model="formData.canary.modelId"
                                   :default-width="selectWidth"
                                   :options="modelList"
                                   :allow-blank="false"
                                   :placeholder="_('请选择模型')" />
                    </div>
                    <div class="form-select__item">
                        <sf-form-item class="form-flex">
                            <sf-fieldlabel>
                                <lang>服务名称</lang>
                            </sf-fieldlabel>
                        </sf-form-item>
                        <sf-textfield
                            ref="fieldName"
                            v-model="formData.canary.subName"
                            :default-width="selectWidth"
                            :max-length="30"
                            :allow-blank="false"
                            :utf8-length="false"
                            vtype="name"
                            :blur-trim="true"
                            :placeholder="_('请输入服务名称')" />
                    </div>
                    <div class="form-select__item">
                        <sf-form-item class="form-flex">
                            <sf-fieldlabel>
                                <lang>流量权重（%）</lang>
                            </sf-fieldlabel>
                        </sf-form-item>
                        <sf-numberfield
                            v-model="formData.canary.traffic"
                            :default-width="numberWidth"
                            :allow-blank="false"
                            :min-value="1"
                            :max-value="100"
                            :allow-decimals="false"
                            :placeholder="_('请输入整数数字')" />
                    </div>
                </div>
                <select-image-form
                    ref="canaryImage"
                    :image-list="imageList"
                    :submit-data="formData.canary" />
                <instance-number-form
                    ref="canaryInstance"
                    :submit-data="formData.canary" />
                <resource-config-form
                    ref="canaryResource"
                    :submit-data="formData.canary" />
            </div>
        </div>
    </sf-form>
</template>
<script>
const DEFAULT_WIDTH = 332;
const NAME_WIDTH = 386;
const SELECT_WIDTH = 160;

const NUMBER_WIDTH = 104;

const PERCENT_TOTAL = 100;

import selectImageForm from 'src/home/mod_cluster/common/common_form/select_image_form';
import instanceNumberForm from 'src/home/mod_cluster/common/common_form/instance_number_form';
import resourceConfigForm from 'src/home/mod_cluster/common/common_form/resource_config_form';

import {NEW_FORM_VALUE} from '../const';

export default {
    components:{
        instanceNumberForm,
        resourceConfigForm,
        selectImageForm
    },
    data () {
        return {
            formData: { ...NEW_FORM_VALUE },
            resourceNums:{
                core: 256,
                memory:256,
                cgu:256
            },
            modelList:[],
            imageList:[]
        };
    },
    computed: {
        defaultWidth () {
            return DEFAULT_WIDTH;
        },
        nameWidth () {
            return NAME_WIDTH;
        },
        selectWidth () {
            return SELECT_WIDTH;
        },
        numberWidth () {
            return NUMBER_WIDTH;
        },
        canaryTraffic () {
            return this.formData.canary.traffic;
        },
        defaultTraffic () {
            return this.formData.default.traffic;
        }

    },
    watch: {
        canaryTraffic () {

            // 而且不存在负数的情况下
            if (this.canaryTraffic && this.canaryTraffic.toString().indexOf('-') < 0) {
                this.formData.default.traffic = PERCENT_TOTAL - this.canaryTraffic;
            }
        },
        defaultTraffic () {
            if (this.defaultTraffic && this.defaultTraffic.toString().indexOf('-') < 0) {
                this.formData.canary.traffic = PERCENT_TOTAL - this.defaultTraffic;
            }
        }
    },

    methods: {
        getJsonValue () {
            Object.assign(this.formData.default,
                this.$refs.defaultImage.getJsonValue(),
                this.$refs.defaultInstance.getJsonValue(),
                this.$refs.defaultResource.getJsonValue());
            Object.assign(this.formData.canary,
                this.$refs.canaryInstance.getJsonValue(),
                this.$refs.canaryImage.getJsonValue(),
                this.$refs.canaryResource.getJsonValue());
            this.formData.canaryTrafficPercent = this.formData.canary.traffic;
            let defaultModelID = this.formData.default.modelId;
            this.formData.default.modelUri = this.modelList.filter(item => item.value === defaultModelID)[0].s3Address;
            this.formData.default.modelName = this.modelList.filter(item => item.value === defaultModelID)[0].label;
            let canaryModelID = this.formData.canary.modelId;
            this.formData.canary.modelUri = this.modelList.filter(item =>item.value === canaryModelID)[0].s3Address;
            this.formData.canary.modelName = this.modelList.filter(item =>item.value === canaryModelID)[0].label;
            return this.formData;
        },

        setJsonValue (data) {
            this.formData = {...NEW_FORM_VALUE, ...data};
        }
    }

};
</script>
<style lang="less" scoped>
    .new-compare_form{
        padding: 15px 32px;
        .sfv-fieldlabel-left{
            padding-left: 0;
        }
        .form-box__content{
            background: #F5F5F5;
            border: 1px solid #E0E0E0;
            border-radius: 2px;
            padding-right: 10px;
            width: 427px;
            padding-top: 15px;
        }
        .form-box__list{
            border-top: 1px solid #dee3ed;
            display: flex;
            .form-box__title{
                margin: 15px 0 5px 0;
                font-size: 14px;
                color: #14161A;
                font-weight:bolder;
                display:flex;
                align-items:center;
            }
            .form-box__items{
                border: 1px solid #ddd;
                padding: 0 10px 0 20px;
                margin-top: 15px;
                background: #F5F5F5;
                &:first-child{
                    margin-right: 15px;
                }
            }
        }
        .form-select__box{
            display: flex;

        }
        .form-select__item{
            display: flex;
            flex-direction: column;
            margin-right: 8px;
            margin-bottom: 16px;
            .sfv-form-item{
                margin-bottom: 0;
            }
        }
        .form-flex{
            display: flex;
        }

    }
</style>
